<template>
  <el-dialog
    v-model="formVisible"
    :title="title"
    :append-to-body="true"
    @close="closeDialog"
    destroy-on-close
    width="800px"
    :close-on-click-modal="false"
  >
    <el-button
      v-hasPerm="'AbpIdentity.OrganitaionUnits.AddUseToOrganization'"
      @click="addDictDetail"
      :icon="Plus"
      type="primary"
      >添加详情</el-button
    >

    <el-table style="width: 100%" :data="dataList">
      <el-table-column type="index" width="50" label="#" align="center"></el-table-column>
      <template v-for="item in columns">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :min-width="item.width"
          align="center"
        >
        </el-table-column>
      </template>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button text type="primary" @click="updateDictDetail(scope.row)"
            >修改</el-button
          >
          <el-button text type="primary" @click="deleteDictDetail(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="paging">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="tablePage.totalResult"
        :page-size="tablePage.pageSize"
        @change="handlePageChange"
        v-model:current-page="tablePage.currentPage"
      />
    </div>
  </el-dialog>
  <addOrUpdateDictionaryDetail
    v-if="addOrUpdateVisable"
    @close="(eventData:any)=> addOrUpdateVisable=eventData"
    :dictId="props.dictId"
    :dictDetailId="currentDetailId"
    @refresh="pg_init"
  />
</template>
<script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";
import addOrUpdateDictionaryDetail from "./addOrUpdateDictionaryDetail.vue";
import { getdictionarydetailpagelist, deletedictionarydetail } from "@/api/dict/index";
const props = defineProps({
  dictId: { type: String, default: null },
  dictName: { type: String, default: null },
});

const emit = defineEmits(["closedialogevent"]);
const addOrUpdateVisable = ref<boolean>(false);
const formVisible = ref<boolean>(true);
const title = ref<string>("字典详情");
const dataList = ref<any>([]);
const currentDetailId = ref<string | null>(null);
const columns = [
  {
    label: "名称",
    prop: "label",
    width: 100,
  },
  {
    label: "值",
    prop: "value",
    width: 150,
  },
  {
    label: "排序",
    prop: "sort",
    width: 40,
  },
];

const tablePage = ref<any>({
  currentPage: 1,
  pageSize: 10,
  totalResult: 0,
});
const addDictDetail = () => {
  currentDetailId.value = null;
  addOrUpdateVisable.value = true;
};

const updateDictDetail = (row: any) => {
  currentDetailId.value = null;
  currentDetailId.value = row.id;
  addOrUpdateVisable.value = true;
};

const deleteDictDetail = (row: any) => {
  ElMessageBox.confirm("确定删除吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    deletedictionarydetail(row.id).then((res) => {
      ElNotification({
        title: "提示",
        message: "删除成功",
        type: "success",
        duration: 2000,
      });
      pg_init();
    });
  });
};
const pg_init = () => {
  title.value = `字典详情-${props.dictName}`;
  const { currentPage, pageSize } = tablePage.value;

  let param = {
    DataDictionaryId: props.dictId,
    SkipCount: (currentPage - 1) * pageSize,
    MaxResultCount: pageSize,
  };

  getdictionarydetailpagelist(param).then((res) => {
    dataList.value = res.items;
    tablePage.value.totalResult = res.totalCount;
  });
};

const closeDialog = () => {
  formVisible.value = false;
  emit("closedialogevent", formVisible.value);
};

const handlePageChange = (currentPage: number, pageSize: number) => {
  tablePage.value.currentPage = currentPage;
  pg_init();
};

onMounted(() => {
  pg_init();
});
</script>
